/**
 * 名称：创建视点管理信息框
 * 作用：创建html视点管理信息框
 * 参数：
 * 状态：
 * 网址：
 * 负责人：
 */
// 记录保存的视点
let viewpoints = {
  videos: [],
  imgPath: [],
  coverImgPath: [] // 封面图片
}
let index = 0 // 漫游开始索引
// 记录保存的相机位置信息
let cameraPoints = []
let img = ''
// 视点管理弹窗开启关闭开关
let viewpointBoxOff = true
function addViewpointPopup() {
  if (viewpointBoxOff) {
    viewpointBoxOff = !viewpointBoxOff
    console.log('开始创建文本框')
    const viewpoint = document.createElement('div')
    viewpoint.id = 'viewpoint-id'
    viewpoint.className = 'viewpoint'
    viewpoint.draggable = 'true'
    viewpoint.innerHTML =
      ' <!--头-->' +
      '        <div class="viewpoint-title">' +
      '            <div>' +
      '                <span>' +
      '                    视点管理' +
      '                </span>' +
      '            </div>' +
      '            <div onclick="closeViewpointPopup()">' +
      '                <img src="Source/Images/label/esc.png">' +
      '            </div>' +
      '        </div>' +
      '        <!--图片-->' +
      '        <div class="viewpoint-img">' +
      '        <div class="viewpoint-img-title">整体漫游</div>' +
      '        <div class="viewpoint-img-item">' +
      '        </div>' +
      '        <div id="viewpoint-camera" style="display: none">' +
      '           <div onclick="addCurrentViewpoint()">添加视点</div>' +
      '        </div>' +
      '        </div>' +
      '        </div>' +
      '        <!--创建-->' +
      '        <div id="viewpoint-add-id" class="viewpoint-add">' +
      '            <button id="viewpoint-addViewpoint" onclick="addViewpoint()">新建</button>' +
      '            <button id="viewpoint-cancel" style="display: none" onclick="cancelViewpoint()">取消</button>' +
      '            <button id="viewpoint-preview" style="display: none" onclick="previewViewpoint()">预览</button>' +
      '            <button id="viewpoint-complete" style="display: none" onclick="completeViewpoint()">完成</button>' +
      '        </div>'
    document.body.appendChild(viewpoint)
  } else {
    viewpointBoxOff = !viewpointBoxOff
    closeViewpointPopup()
  }
}

/**
 * 名称：关闭视点管理弹窗
 * 作用：将创建的视点管理弹窗直接进行删除
 * 参数：
 * 状态：
 * 网址：
 * 负责人：
 */
function closeViewpointPopup() {
  viewpoints.videos = []
  viewpoints.imgPath = []
  viewpoints.coverImgPath = []
  cameraPoints = []
  img = ''
  document.getElementById('viewpoint-id').remove()
}

/**
 * 名称：创建视点
 * 作用：切换创建视点弹框
 * 参数：
 * 状态：
 * 网址：
 * 负责人：
 */
function addViewpoint() {
  // 放开取消,预览与完成标签，关闭新建标签
  viewpoints.imgPath = []
  cameraPoints = []
  img = ''
  document.getElementsByClassName('viewpoint-img-title')[0].innerHTML =
    '漫游视点：'
  document.getElementsByClassName('viewpoint-img-item')[0].innerHTML = ''
  document.getElementById('viewpoint-addViewpoint').style.display = 'none'
  document.getElementById('viewpoint-camera').style.display = 'block'
  document.getElementById('viewpoint-add-id').style.padding = '5% 30%'
  document.getElementById('viewpoint-preview').style.display = 'block'
  document.getElementById('viewpoint-cancel').style.display = 'block'
  document.getElementById('viewpoint-complete').style.display = 'block'
}

/**
 * 名称：取消视点创建
 * 作用：点击取消按钮进行调用
 * 参数：
 * 状态：
 * 网址：
 * 负责人：
 */
function cancelViewpoint() {
  viewpoints.imgPath = []
  cameraPoints = []
  img = ''
  if (viewpoints.coverImgPath.length != 0) {
    viewpoints.coverImgPath.forEach((item, i) => {
      img += `<img src="${item}" onclick="flyToPoint(${i})" style="cursor: pointer;"/>`
    })
    const viewpointImg = document.getElementsByClassName('viewpoint-img-item')
    viewpointImg[0].innerHTML = img
  }
  document.getElementsByClassName('viewpoint-img-title')[0].innerHTML =
    '整体漫游'
  //   document.getElementsByClassName('viewpoint-img-item')[0].innerHTML = ''
  document.getElementById('viewpoint-addViewpoint').style.display = 'block'
  document.getElementById('viewpoint-camera').style.display = 'none'
  document.getElementById('viewpoint-add-id').style.padding = '5% 40%'
  document.getElementById('viewpoint-preview').style.display = 'none'
  document.getElementById('viewpoint-cancel').style.display = 'none'
  document.getElementById('viewpoint-complete').style.display = 'none'
}

/**
 * 名称：预览视点创建
 * 作用：点击预览按钮进行调用
 * 参数：
 * 状态：
 * 网址：
 * 负责人：
 */
function previewViewpoint() {
  if (viewpoints.imgPath.length >= 2) {
    console.log('previewViewpoint -> cameraPoints', cameraPoints)
    flyToPoint()
  } else {
    alert('请至少选择两个及以上视点！')
  }
}

/**
 * 名称：完成视点创建
 * 作用：点击完成按钮进行调用
 * 参数：
 * 状态：
 * 网址：
 * 负责人：
 */
function completeViewpoint() {
  if (viewpoints.imgPath.length >= 2) {
    // index = 1
    viewpoints.videos.push(cameraPoints)
    console.log('completeViewpoint -> viewpoints.videos', viewpoints.videos)
    img = ''
    viewpoints.coverImgPath.push(viewpoints.imgPath[0])
    viewpoints.coverImgPath.forEach((item, i) => {
      img += `<img src="${item}" onclick="flyToPoint(${i})" style="cursor: pointer;"/>`
    })
    const viewpointImg = document.getElementsByClassName('viewpoint-img-item')
    viewpointImg[0].innerHTML = img
    document.getElementsByClassName('viewpoint-img-title')[0].innerHTML =
      '整体漫游'
    document.getElementById('viewpoint-addViewpoint').style.display = 'block'
    document.getElementById('viewpoint-camera').style.display = 'none'
    document.getElementById('viewpoint-add-id').style.padding = '5% 40%'
    document.getElementById('viewpoint-preview').style.display = 'none'
    document.getElementById('viewpoint-cancel').style.display = 'none'
    document.getElementById('viewpoint-complete').style.display = 'none'
  } else {
    alert('请至少选择两个及以上视点！')
  }
}

/**
 * 名称：添加当前视点
 * 作用：点击添加视点按钮进行调用
 * 参数：
 * 状态：
 * 网址：
 * 负责人：
 */
function addCurrentViewpoint() {
  let cameraPoint = getCameraCoordinate()
  cameraPoints.push(cameraPoint.camera)
  console.log('addCurrentViewpoint -> cameraPoint', cameraPoint, cameraPoints)
  img = ''
  const res = saveCurrentViewAsImage()
  viewpoints.imgPath.push(res)
  viewpoints.imgPath.forEach(item => {
    img += `<img src="${item}" draggable="true"/>`
  })
  //   console.log('img', img)
  const viewpointImg = document.getElementsByClassName('viewpoint-img-item')
  console.log('addCurrentViewpoint -> viewpointImg', viewpointImg)
  viewpointImg[0].innerHTML = img
}

/**
 * 名称：保存视点
 * 作用：保存视点将视点保存为图片，并可选下载
 * 参数：
 * @param load 是否下载图片 true 是（默认）； false 否
 * @return {{imgUrl: string}}//图片64位二进制数据
 * 状态：已完成
 * 负责人：刘洮君
 */
const saveCurrentViewAsImage = () => {
  // 渲染场景内容 等待场景中的资源加载完毕
  viewer.render()
  // 将 Canvas 转换为图像的数据 URL
  const imgUrl = viewer.scene.canvas.toDataURL('image/JPEG') // 使用 JPEG 格式，也可以使用 'image/png' 生成 PNG 格式
  return imgUrl
}

/**
 * 名称：视点跳转（根据坐标跳转）
 * 作用：跳转视点
 * 状态：已完成
 * 参数：
 * @param camareInfo 相机位置对象
 * @param complete
 * @param cancel
 * 负责人：*
 */
const flyToPoint = i => {
  console.log('i', i, index, cameraPoints.length)
  if (i >= 0) {
    cameraPoints = viewpoints.videos[i]
  }
  if (index >= cameraPoints.length - 1) {
    index = 0
    console.log('index', index)
    return
  }
  viewer.camera.setView({
    destination: cameraPoints[index].position,
    orientation: {
      heading: cameraPoints[index].heading, // 观察点左右 ，控制飞机航向
      pitch: cameraPoints[index].pitch, // 远近,上下，俯仰角度
      roll: cameraPoints[index].roll //翻滚
    }
  })
  viewer.camera.flyTo({
    //目标位置 经度，纬度（弧度），高度
    destination: cameraPoints[index + 1].position, //返回的三维点表示的是在 WGS84 椭球体上的位置
    orientation: {
      heading: cameraPoints[index + 1].heading, // 观察点左右 ，控制飞机航向
      pitch: cameraPoints[index + 1].pitch, // 远近,上下，俯仰角度
      roll: cameraPoints[index + 1].roll //翻滚
    },
    duration: 3, // 飞行动画的持续时间（以秒为单位）
    complete: function() { // 飞行结束后执行回调
      console.log('flyToPoint -> complete')
      flyToPoint()
    },
    // easingFunction 控制在飞行过程中如何插值时间
    easingFunction: Cesium.EasingFunction.LINEAR_NONE // 线性缓动
  })
  index += 1
  console.log('flyToPoint -> index', index)
}
